<template>
	<a-modal v-bind="options">
		<div class="table-box">
			<vxe-table ref="xTable1" :data="tableData" v-bind="billTableOption" :loading="loadings.detail">
				<vxe-column field="status" title="类型" min-width="80" align="center">
					<template #default="{row}">
						{{ row.invoiceType === 1 ? '开票' : '冲红' }}
					</template>
				</vxe-column>
				<vxe-column field="invoiceNo" title="发票号码" min-width="120" align="center" />
				<vxe-column field="price" title="开票/冲红金额（元）" min-width="130" align="center" />
				<vxe-column field="createrName" title="操作人" min-width="100" align="center" />
				<vxe-column title="操作时间" min-width="260" align="center">
					<template #default="{row}">{{ row.createTime?.substr(0, 10) }}</template>
				</vxe-column>
				<vxe-column title="操作" width="100" align="center">
					<template #default="{row}">
						<a @click="view(row)">查看</a>
					</template>
				</vxe-column>
			</vxe-table>
		</div>

		<!-- 冲红或者详情 -->
		<flush-red-details v-model:visible="visibles.invoiceingDetail" :id="invoiceInfoId" @close="getRecoreds()"></flush-red-details>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, watch, watchEffect, ref, onMounted, toRef} from 'vue'
	import {VxeTableProps, VxeTableInstance} from 'vxe-table'
	import invoicing from '@/api/invoicing'
	import FlushRedDetails from '@/components/finance/invoice-administration/billing-history/flush-red-details.vue'

	const props = defineProps<{
		visible: boolean
		id: string | null
	}>()

	const emits = defineEmits(['update:visible', 'close'])

	const options = reactive({
		width: 880,
		title: '开票记录',
		maskClosable: false,
		centered: true,
		destroyOnClose: true,
		bodyStyle: {padding: '20px 15px 0'},
		visible: toRef(props, 'visible'),
		onCancel() {
			console.log('关闭对话框')
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		},
		onOk() {
			console.log('关闭对话框')
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const xTable1 = ref<VxeTableInstance>()
	const tableData = ref<any[]>([])
	const loadings = reactive({
		detail: false,
		save: false
	})
	const visibles = reactive({
		invoiceingDetail: false
	})
	const invoiceInfoId = ref<any>(null)

	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		}
	})

	/** 查看详情 */
	const view = (row: any) => {
		visibles.invoiceingDetail = true
		invoiceInfoId.value = row.invoicingOrgItemId
	}

	/** 获取开票记录 */
	const getRecoreds = () => {
		invoicing
			.infos({finDetailId: props.id})
			.then(res => {
				tableData.value = res.data
			})
			.finally(() => {
				loadings.detail = false
			})
	}

	watch(
		() => props.visible,
		() => {
			if (props.visible) getRecoreds()
		}
	)
</script>

<style lang="less" scoped>
	.table-box {
		height: 60vh;
		width: 100%;
		overflow: auto;
	}
</style>
